
//将ast解析为render函数
/**
 * {
    "tag": "div",
    "attrs": [
        {
            "name": "id",
            "value": "app"
        },
        {
            "name": "style",
            "value": {
                "color": " red",
                "font-size": "20px"
            }
        }
    ],
    "children": [
        {
            "type": 3,
            "text": "hello",
            "parent": "div"
        },
        {
            "tag": "h1",
            "attrs": [],
            "children": [
                {
                    "type": 3,
                    "text": "123",
                    "parent": "h1"
                }
            ],
            "type": 1,
            "parent": "div"
        }
    ],
    "type": 1,
    "parent": null
}解析为
*/

/*
render() { _解析标签  _v表示文本 _s插值表达式
return _c('div',{ id:'app',style:{color:red} } , _v('hello'+_s(name)),_c)
}
*/


//处理属性
export function generate(el) {
  //注意属性 {id:'app',style:{color:'red';font-size:20px}}

  let children = genChildren(el)
  let code = `_c('${el.tag}',${el.attrs.length ? `{${generateProps(el.attrs)}}` : 'undefined'
    },${children ? children : ''})`
  console.log('我是最终的render',code);
  return code
}
//处理属性
function generateProps(attrs) {
  let str = ''
  for (let i = 0; i < attrs.length; i++) {
    let attr = attrs[i] // {name: 'style', value: 'color: red;font-size:20px;'}
    if (attr.name === 'style') {
      let obj = {}
      attr.value.split(';').forEach(element => {
        let [key, value] = element.split(':')
        obj[key] = value
      });
      attr.value = obj
    }

    //拼接
    str += `${attr.name}:${JSON.stringify(attr.value)},`
  }

  return `${str.slice(0, -1)}` //去除最后的逗号
}
//处理子结点
function genChildren(el) {
  let children = el.children
  if (children) {
    return children.map(c => gen(c)).join(',')
  }
}
function gen(node) { //1、文本 2、标签
  if (node.type === 1) { //是元素
    return generate(node)
  }
  else { //文本 （1）只是文本   （2）有插值表达式 {{}}
    const defaultTagRE = /\{\{((?:.|\r?\n)+?)\}\}/g; //判断是否有插值{{}的正则}
    let text = node.text.replace(/\s/g, '')
    if (!defaultTagRE.test(text)) { //没有插值表达式{{}}
      return `_v(${JSON.stringify(node.text)})`
    }
    else { //有{{}},  如hello {{name}} ,{{msg}} ,你好
      let tokens = []
      let lastIndex = defaultTagRE.lastIndex = 0 //全局使用，lastIndex 是正则表达式的一个可读可写的整型属性，用来指定下一次匹配的起始索引。
      let match
      while (match = defaultTagRE.exec(text)) {
        // console.log(match); //["{{msg}}","msg",groups: undefined,index: 5,input: "hello{{msg}}"]
        if (match.index > lastIndex) {//添加内容
          tokens.push(JSON.stringify(text.slice(lastIndex, match.index)))

        }
        tokens.push(`_s(${match[1].trim()})`)  //插值表达式 msg

        lastIndex = match.index + match[0].length
        if (lastIndex < text.length) { //说明插值表达式后面还有内容
          tokens.push(JSON.stringify(text.slice(lastIndex)))
        }
        return `_v(${tokens.join('+')})`
      }
    }
  }

}